<template>
  <div class="main-box">
    <div class="table-box">
      <div class="card mb10 pt0 pb0">
        <SelectFilter :data="selectFilterData" :default-values="selectFilterValues" @change="changeSelectFilter" />
      </div>
      <ProTable
        ref="proTable"
        title="库房列表"
        highlight-current-row
        :columns="columns"
        :request-api="getWarehouseList"
        :init-param="Object.assign(treeFilterValues, selectFilterValues)"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openDrawerAdd()">新增库房</el-button>
          <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加库房</el-button>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出库房数据</el-button>
        </template>
        <!-- 单选 -->
        <template #radio="scope">
          <el-radio :label="scope.row.id" v-model="radio"><i></i></el-radio>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="EditPen" @click="openDrawerShow('查看', scope.row)">详细信息</el-button>
        </template>
      </ProTable>
      <ShowDrawer ref="drawerRefShow" />
      <AddDrawer ref="drawerRefAdd" />
      <ImportExcel ref="dialogRef" />
    </div>
  </div>
</template>
<script setup lang="tsx" name="useSelectFilter">
import { ref, onMounted, reactive } from "vue";
import { Warehouse } from "@/api/interface";
import SelectFilter from "@/components/SelectFilter/index.vue";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, EditPen, Download, Upload } from "@element-plus/icons-vue";
import { BatchAddWarehouse, exportWarehouseInfo, getWarehouseList } from "@/api/modules/warehouse";
import { warehouseLevel } from "@/utils/serviceDict";
import AddDrawer from "./components/AddDrawer.vue";
import ShowDrawer from "./components/ShowDrawer.vue";
import { ElMessage } from "element-plus";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 单选
const radio = ref("");

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "warehouseId", label: "库房id", width: 100, sortable: true },
  { prop: "warehouseName", label: "库房名", width: 150, search: { el: "input" } },
  { prop: "warehouseLevel", label: "库房等级", enum: warehouseLevel, tag: true, sortable: true },
  { prop: "warehouseAddress.province", label: "省" },
  { prop: "warehouseAddress.city", label: "市" },
  { prop: "warehouseAddress.zone", label: "区" },
  { prop: "warehouseAddress.detail", label: "详细地址" },
  { prop: "operation", label: "操作", width: 200, fixed: "right" }
];

// selectFilter 数据
const selectFilterData = reactive([
  {
    title: "库房类型",
    key: "warehouseLevel",
    options: [
      {
        label: "全部",
        value: -1
      },
      {
        label: "中心库房",
        value: 0,
        icon: "MapLocation"
      },
      {
        label: "分站库房",
        value: 1,
        icon: "Place"
      }
    ]
  }
]);

// 初始化方法，挂载之后执行的东西填到里面
onMounted(() => {});

const treeFilterValues = reactive({});

// 默认 selectFilter 参数
const selectFilterValues = ref({ warehouseLevel: -1 });
const changeSelectFilter = (value: typeof selectFilterValues.value) => {
  ElMessage.success("筛选成功 🤔");
  proTable.value!.pageable.current = 1;
  selectFilterValues.value = value;
};

// 导出任务单列表
const downloadFile = async () => {
  // ElMessageBox.confirm("确认导出数据?", "温馨提示", { type: "warning" }).then(() =>
  //   // useDownload(exportUserInfo, "任务单列表", proTable.value?.searchParam)
  // );
};

// 批量添加库房
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
const batchAdd = () => {
  const params = {
    title: "客户",
    tempApi: exportWarehouseInfo,
    importApi: BatchAddWarehouse,
    getTableList: proTable.value?.getTableList
  };
  dialogRef.value?.acceptParams(params);
};

const drawerRefAdd = ref<InstanceType<typeof AddDrawer> | null>(null);
const openDrawerAdd = () => {
  const params = {
    getTableList: proTable.value?.getTableList
  };
  drawerRefAdd.value?.acceptParams(params);
};

const drawerRefShow = ref<InstanceType<typeof ShowDrawer> | null>(null);
const openDrawerShow = (title: string, row: Partial<Warehouse.ResWarehouseList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRefShow.value?.acceptParams(params);
};
</script>
